<!doctype html>
<html class="export" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Cascading grid layout library">

  <title>Masonry</title>

    <link rel="stylesheet" href="css/masonry-docs.css?3" media="screen">

</head>
<body class="page--" data-page="">


  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--extras">
          <a href="extras.html">Extras</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

    <div class="hero" data-js="hero">
      <div class="container">
    
        <div class="hero-grid clearfix">
          <div class="hero-grid__grid-sizer"></div>
    
          <div class="hero-grid__item hero-grid__item--texty hero-grid__item--width3">
            <h1 class="hero__title">Masonry</h1>
            <p class="hero__tagline">Cascading grid layout library</p>
          </div>
    
          <div class="hero-grid__item">
            <a class="hero-grid__big-button" href="masonry.pkgd.min.js">
              <svg class="js-file" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewbox="0 0 500 500">
                <path d="M218 230V332c0 30-12 42-35 42c-2 0-10-1-11-1l2-20c1 0 6 1 7 1c15 0 13-18 13-20
                  V230H218z M299 256c-2-3-10-10-21-10c-10 0-15 4-15 10c0 9 10 10 21 13c19 4 31 13 31 29
                  c0 17-10 32-40 32c-18 0-32-8-39-16l16-15c3 4 11 12 25 12c14 0 15-9 15-11
                  c0-8-6-10-22-14c-16-4-28-11-28-27c0-21 18-31 38-31c21 0 32 10 36 15L299 256z
                   M206 183c-9 0-15 6-15 14s7 14 15 14s15-6 15-14S214 183 206 183z M445 149
                  c0-0 0-1 0-1c-0-1-0-2-0-2c0 0 0-0 0-0c-0-1-0-2-1-3c-0-0-0-0-0-1
                  c-0-1-1-2-1-2c0-0-0-0-0-0c-0-1-1-2-1-2c-0-0-0-0-0-1c-1-1-1-1-2-2
                  c0 0 0 0 0 0l-125-125c0 0 0 0 0 0c-1-1-1-1-2-2c-0-0-0-0-1-0c-1-1-1-1-2-1c-0 0-0-0-0-0
                  c-1-0-2-1-2-1c-0-0-0-0-1-0c-1-0-2-1-3-1c0 0-0 0-0 0c-1-0-2-0-2-0
                  c-0 0-1 0-1 0c-0 0-0 0-1 0H100C75 5 55 25 55 50v400c0 25 20 45 45 45h300c25 0 45-20 45-45V150
                  C445 150 445 150 445 149z M320 73l57 57H320V73z M400 455H100c-3 0-5-2-5-5V50c0-3 2-5 5-5h180v105
                  c0 11 9 20 20 20h105v280C405 453 403 455 400 455z"/>
              </svg>
              Download masonry.&#x200B;pkgd.&#x200B;min.js
            </a>
          </div>
    
    
          <div class="hero-grid__item">
            <a class="hero-grid__big-button" href="https://github.com/desandro/masonry">
              <svg class="github-logo" viewbox="0 0 512 512">
                <path d="M256 0C115 0 0 115 0 256c0 113 73 209 175 243 13 2 18-5 18-12v-48c-64 12-81-16-86-30-3-7-15-30-26-36-9-5-22-17 0-17 20 0 35 19 39 26 23 39 60 28 75 21 2-17 9-28 16-34-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-33 3-68 0 0 21-7 70 26 20-6 42-9 64-9s43 3 64 9c49-33 70-26 70-26 14 35 5 61 3 68 16 18 26 41 26 69 0 98-60 120-117 126 9 8 17 23 17 47v70c0 7 5 15 18 12 100-33 173-129 173-242C512 115 397 0 256 0z"/>
              </svg>
              Masonry on GitHub
            </a>
          </div>
    
          <div class="hero-grid__item hero-grid__item--texty hero-grid__item--width2">
            <h2 class="hero__what-is-title">What is Masonry?</h2>
            <p class="hero__what-is-description">Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You&#x2019;ve probably seen it in use all over the Internet.</p>
          </div>
    
        </div> 
    
      </div> 
    
    </div> 

  <div id="content" class="content container">


    <ul class="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#install">Install</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#download">Download</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cdn">CDN</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#package-managers">Package managers</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#getting-started">Getting started</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#html">HTML</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#css">CSS</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-jquery">Initialize with jQuery</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#initialize-in-html">Initialize in HTML</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#next">Next</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#mit-license">MIT License</a></li>
</ul>



<h2 id="install">Install</h2>


<h3 id="download">Download</h3>

<ul>
  <li>
    <a href="masonry.pkgd.min.js">masonry.pkgd.min.js</a> minified, or
  </li>
  <li>
    <a href="masonry.pkgd.js">masonry.pkgd.js</a> un-minified
  </li>
</ul>


<h3 id="cdn">CDN</h3>

<p>Link directly to Masonry files on <a href="https://unpkg.com">unpkg</a>.</p>

<pre><code class="html"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
<span class="comment">&lt;!-- or --&gt;</span>
<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
</code></pre>


<h3 id="package-managers">Package managers</h3>

<p>Install with <a href="https://bower.io">Bower</a>: &#xA0;<code>bower install masonry --save</code></p>

<p><a href="https://www.npmjs.com/package/masonry-layout">Install with npm</a>: &#xA0;<code>npm install masonry-layout</code></p>


<h2 id="getting-started">Getting started</h2>


<h3 id="html">HTML</h3>

<p>Include the Masonry <code>.js</code> file in your site.</p>

<pre><code class="html"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;/path/to/masonry.pkgd.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>
</code></pre>

<p>Masonry works on a container grid element with a group of child items.</p>

<pre><code class="html"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid&quot;</span>&gt;</span>
  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid-item&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid-item grid-item--width2&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid-item&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="name">div</span>&gt;</span>
</code></pre>


<h3 id="css">CSS</h3>

<p>All sizing of items is handled by your CSS.</p>

<pre><code class="css"><span class="selector-class">.grid-item</span> { <span class="attribute">width</span>: <span class="number">200px</span>; }
<span class="selector-class">.grid-item--width2</span> { <span class="attribute">width</span>: <span class="number">400px</span>; }
</code></pre>


<h3 id="initialize-with-jquery">Initialize with jQuery</h3>

<p>You can use Masonry as a jQuery plugin:
  <code>$(<span class="string">&apos;selector&apos;</span>).masonry()</code>.</p>

<pre><code class="js">$(<span class="string">&apos;.grid&apos;</span>).masonry({
  <span class="comment">// options</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  <span class="attr">columnWidth</span>: <span class="number">200</span>
});
</code></pre>


<h3 id="initialize-with-vanilla-javascript">Initialize with Vanilla JavaScript</h3>

<p>You can use Masonry with vanilla JS:
  <code><span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( elem, options )</code>.
  The <code><span class="masonry_keyword">Masonry</span>()</code> constructor accepts two arguments: the container element and an options object.</p>

<pre><code class="js"><span class="keyword">var</span> elem = <span class="built_in">document</span>.querySelector(<span class="string">&apos;.grid&apos;</span>);
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( elem, {
  <span class="comment">// options</span>
  itemSelector: <span class="string">&apos;.grid-item&apos;</span>,
  <span class="attr">columnWidth</span>: <span class="number">200</span>
});

<span class="comment">// element argument can be a selector string</span>
<span class="comment">//   for an individual element</span>
<span class="keyword">var</span> <span class="masonry_var">msnry</span> = <span class="keyword">new</span> <span class="masonry_keyword">Masonry</span>( <span class="string">&apos;.grid&apos;</span>, {
  <span class="comment">// options</span>
});
</code></pre>


<h3 id="initialize-in-html">Initialize in HTML</h3>

<p>You can initialize Masonry in HTML, without writing any JavaScript. Add <code>data-masonry</code> attribute to the container element. <a href="options.html">Options</a> can be set in its value.</p>

<pre><code class="html"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid&quot;</span> <span class="attr">data-masonry</span>=<span class="string">&apos;{ &quot;itemSelector&quot;: &quot;.grid-item&quot;, &quot;columnWidth&quot;: 200 }&apos;</span>&gt;</span>
</code></pre>

<p class="edit-demo">
    <a href="https://codepen.io/desandro/pen/vLeBLV">Edit this demo on CodePen</a>
</p>

<div class="call-out">
  <p>Options set in HTML must be valid JSON. Keys need to be quoted, for example <code><span class="string">&quot;itemSelector&quot;</span>:</code>. Note the value of <code>data-masonry</code> is set with single quotes <code>&apos;</code>, but JSON entities use double-quotes <code>&quot;</code>.</p>
</div>

<p>HTML initialization was previously done with a class of <code>js-masonry</code> and setting options in <code>data-masonry-options</code> in Masonry v3. Masonry v4 is backwards compatible with this code.</p>

<pre><code class="html"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;grid js-masonry&quot;</span>
  <span class="attr">data-masonry-options</span>=<span class="string">&apos;{ &quot;itemSelector&quot;: &quot;.grid-item&quot;, &quot;columnWidth&quot;: 200 }&apos;</span>&gt;</span>
</code></pre>

<h2 id="next">Next</h2>

<p>Learn more about how to use Masonry:</p>

<ul>
  <li><a href="layout.html">Layout</a></li>
  <li><a href="options.html">Options</a></li>
  <li><a href="methods.html">Methods</a></li>
</ul>


<h2 id="mit-license">MIT License</h2>

<p>Masonry is released under the <a href="https://desandro.mit-license.org/">MIT License</a>. Have at it.</p>


<div id="notification"></div>


  </div>

  <div class="site-nav">
    <div class="container">
      <ol class="site-nav__list">
        <li class="site-nav__item site-nav__item--homepage">
          <a href=".">Masonry</a></li>
        <li class="site-nav__item site-nav__item--layout">
          <a href="layout.html">Layout</a></li>
        <li class="site-nav__item site-nav__item--options">
          <a href="options.html">Options</a></li>
        <li class="site-nav__item site-nav__item--methods">
          <a href="methods.html">Methods</a></li>
        <li class="site-nav__item site-nav__item--events">
          <a href="events.html">Events</a></li>
        <li class="site-nav__item site-nav__item--extras">
          <a href="extras.html">Extras</a></li>
        <li class="site-nav__item site-nav__item--faq">
          <a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  <div class="site-footer">
    <div class="container">
  
      <p class="site-footer__copy">
        Masonry is made by <a href="https://desandro.com">David DeSandro</a>.
        Make something rad with it.
      </p>
  
      <div class="showcase">
      
        <ul class="showcase-item-list">
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://isotope.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="isotope-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 350 350" width="100" height="100">
                      <path class="isotope-illo__color1" fill="#6C6" d="M80 170H30c-6 0-10-5-10-10v-50c0-6 5-10 10-10h50c6 0 10 5 10 10v50C90 166 86 170 80 170z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M80 90H30c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C90 86 86 90 80 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M160 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C170 86 166 90 160 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M240 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C250 86 246 90 240 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M320 90h-50c-6 0-10-5-10-10V30c0-6 5-10 10-10h50c6 0 10 5 10 10v50C330 86 326 90 320 90z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M155 165h-40c-6 0-10-5-10-10v-40c0-6 5-10 10-10h40c6 0 10 5 10 10v40 C165 161 161 165 155 165z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M230 160h-30c-6 0-10-5-10-10v-30c0-6 5-10 10-10h30c6 0 10 5 10 10v30 C240 156 236 160 230 160z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M305 155h-20c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20 C315 151 311 155 305 155z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M65 235H45c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20C75 231 71 235 65 235z"/>
                      <path class="isotope-illo__color1" fill="#6C6" d="M140 230h-10c-6 0-10-5-10-10v-10c0-6 5-10 10-10h10c6 0 10 5 10 10v10 C150 226 146 230 140 230z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M305 235h-20c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20 C315 231 311 235 305 235z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M65 315H45c-6 0-10-5-10-10v-20c0-6 5-10 10-10h20c6 0 10 5 10 10v20C75 311 71 315 65 315z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M150 320h-30c-6 0-10-5-10-10v-30c0-6 5-10 10-10h30c6 0 10 5 10 10v30 C160 316 156 320 150 320z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M220 230h-10c-6 0-10-5-10-10v-10c0-6 5-10 10-10h10c6 0 10 5 10 10v10 C230 226 226 230 220 230z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M235 325h-40c-6 0-10-5-10-10v-40c0-6 5-10 10-10h40c6 0 10 5 10 10v40 C245 321 241 325 235 325z"/>
                      <path class="isotope-illo__color2" fill="#19F" d="M320 330h-50c-6 0-10-5-10-10v-50c0-6 5-10 10-10h50c6 0 10 5 10 10v50 C330 326 326 330 320 330z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Isotope</h3>
                  <p class="showcase-item__description">Filter &amp; sort magical layouts</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://infinite-scroll.com">
                <div class="showcase-item__image">
                    <svg class="infinite-scroll-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 520 520" width="200" height="200">
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M90,110H10V90c0-22,18-40,40-40h40V110z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front1" d="M270,90L270,90c0-22-18-40-40-40h0H50h0c22,0,40,18,40,40v0v0v160h180V90z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M170,330v-20H90v20v0c0,22,18,40,40,40h0h40V330z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M350,150H210c-22,0-40,18-40,40v140v0c0,22-18,40-40,40h0h220V150z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front3" d="M430,470V270H250v160c0,22,18,40,40,40H430z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--front2" d="M250,190v20h180v-20c0-22-18-40-40-40H210h0C232,150,250,168,250,190L250,190z"/>
                      <path class="infinite-scroll-illo__page infinite-scroll-illo__page--back" d="M330,410v20v0c0,22-18,40-40,40h0h180c22,0,40-18,40-40v-20H330z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Infinite Scroll</h3>
                  <p class="showcase-item__description">Automatically add next page</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://flickity.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="flickity-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 360 360" width="100" height="100">
                      <path class="flickity-illo__color1" fill="#19F" d="M300 220L300 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color1" fill="#19F" d="M340 220L340 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color2" fill="#333" d="M320 290V180c0-18-10-35-27-43L240 110v180H320z"/>
                      <path class="flickity-illo__color3" fill="white" d="M240 300H120c-11 0-20-9-20-20V40c0-11 9-20 20-20h120c11 0 20 9 20 20v240C260 291 251 300 240 300z"/>
                      <path class="flickity-illo__color4" fill="#ED0" d="M230 260H130c-6 0-10-5-10-10V70c0-6 5-10 10-10h100c6 0 10 5 10 10v180 C240 256 236 260 230 260z"/>
                      <path class="flickity-illo__color2" fill="#333" d="M260 200h60v81c0 32-26 59-59 59h0c-34 0-61-27-61-61V240h20 C242 240 260 222 260 200L260 200z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M180 220h-60V100h60c6 0 10 5 10 10v100C190 216 186 220 180 220z"/>
                      <path class="flickity-illo__color1" fill="#19F" d="M240 220h-20c-6 0-10-5-10-10V110c0-6 5-10 10-10h20V220z"/>
                      <rect class="flickity-illo__color2" fill="#333" x="230" y="280" width="90" height="80"/>
                      <circle class="flickity-illo__color4" fill="#ED0" cx="180" cy="280" r="10"/>
                      <line class="flickity-illo__thumb" stroke="#333" stroke-width="60" stroke-linecap="round" x1="262" y1="290" x2="152" y2="240"/>
                      <path class="flickity-illo__color4" fill="#ED0" d="M190 50h-20c-6 0-10-5-10-10v0c0-6 5-10 10-10h20c6 0 10 5 10 10v0C200 46 196 50 190 50z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M80 220L80 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                      <path class="flickity-illo__color5" fill="#C25" d="M40 220L40 220c-11 0-20-9-20-20v-80c0-11 9-20 20-20h0V220z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Flickity</h3>
                  <p class="showcase-item__description">Touch, responsive, flickable carousels</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="https://packery.metafizzy.co">
                <div class="showcase-item__image">
                    <svg class="packery-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
                      <path class="packery-illo__item" fill="#C09" d="M172 180H48c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 176 176 180 172 180z"/>
                      <path class="packery-illo__item" fill="#C09" d="M172 340H48c-4 0-8-4-8-8V208c0-4 4-8 8-8h124c4 0 8 4 8 8v124C180 336 176 340 172 340z"/>
                      <path class="packery-illo__item" fill="#C09" d="M492 660H368c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C500 656 496 660 492 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 660H528c-4 0-8-4-8-8V528c0-4 4-8 8-8h124c4 0 8 4 8 8v124C660 656 656 660 652 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 500H368c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v124C660 496 656 500 652 500z"/>
                      <path class="packery-illo__item" fill="#C09" d="M332 660H48c-4 0-8-4-8-8V368c0-4 4-8 8-8h284c4 0 8 4 8 8v284C340 656 336 660 332 660z"/>
                      <path class="packery-illo__item" fill="#C09" d="M652 340H528c-4 0-8-4-8-8V48c0-4 4-8 8-8h124c4 0 8 4 8 8v284C660 336 656 340 652 340z"/>
                      <path class="packery-illo__draggie" fill="#EA0" d="M572 440H288c-4 0-8-4-8-8V148c0-4 4-8 8-8h284c4 0 8 4 8 8v284C580 436 576 440 572 440z"/>
                      <g>
                        <path class="packery-illo__hand" fill="white" d="M530 250c-11 0-20 9-20 20v-10c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20s-20 9-20 20c0-11-9-20-20-20
                          s-20 9-20 20v20c-17 0-30 13-30 30c0 11 6 20 14 25l19 35c10 18 30 30 51 30h28
                          c43 0 78-35 78-78V270C550 259 541 250 530 250z"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="430" y1="300" x2="430" y2="340"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="470" y1="300" x2="470" y2="340"/>
                        <line class="packery-illo__hand-line" stroke="#EA0" fill="none" stroke-width="16" stroke-linecap="round" x1="510" y1="300" x2="510" y2="340"/>
                      </g>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Packery</h3>
                  <p class="showcase-item__description">Gapless, draggable grid layouts</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="http://logo.pizza">
                <div class="showcase-item__image">
                    <svg class="logo-pizza-illo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 700" width="100" height="100">
                      <path class="logo-pizza-illo__outline" fill="#C25" d="M513 91c-9-0-17 5-21 12l-80 160c-3 5-6 10-11 15l-47 47
                        c-5 5-12-1-9-7l32-64c5-11-2-23-14-23h-0c-121 0-268 70-327 180
                        C-9 497 35 609 196 609c138 0 279-85 327-180v0c5-11-2-23-14-23h-77c-13 0-19-15-10-24
                        l81-81c5-5 11-8 18-8l0 0c13 0 19 15 10 24L494 354c-6 6-6 14 0 20c3 3 6 4 10 4
                        c4 0 7-1 10-4l80-80h53c9 0 17-5 21-13C707 190 656 97 513 91z M334 281l-59 117
                        c-2 5-7 8-13 8H97c-4 0-6-4-3-7c49-64 143-114 236-124C333 275 335 278 334 281z
                         M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
                        C106 565 38 521 70 441z M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
                        c2-5 7-8 13-8h166C466 434 468 438 466 441z M446 318l-81 81c-5 5-11 8-18 8l0 0
                        c-13 0-19-15-10-24l81-81c5-5 11-8 18-8l0 0C449 294 455 309 446 318z M447 258L506 139
                        c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452C448 266 445 262 447 258z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M334 281l-59 117c-2 5-7 8-13 8H97c-4 0-6-4-3-7
                        c49-64 143-114 236-124C333 275 335 278 334 281z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M70 441c2-4 6-7 10-7h168c4 0 7 4 5 8l-59 118c-2 4-6 6-11 6
                        C106 565 38 521 70 441z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M466 441c-49 64-143 114-236 124c-3 0-6-3-4-6l59-117
                        c2-5 7-8 13-8h166C466 434 468 438 466 441z"/>
                      <path class="logo-pizza-illo__slice" fill="#ED0" d="M447 258L506 139c2-4 6-7 11-6c101 7 140 60 114 126c-2 4-6 7-10 7H452
                        C448 266 445 262 447 258z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Logo Pizza</h3>
                  <p class="showcase-item__description">Hot &amp; ready logos for sale</p>
                </div>
              </a>
            </li>
      
            <li class="showcase-item">
              <a class="showcase-item__link" href="http://fizzy.school">
                <div class="showcase-item__image">
                    <svg class="witchie-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1000 1000" width="200" height="200">
                      <circle class="witchie-logo__moon" fill="white" cx="500" cy="500" r="500"/>
                      <path class="witchie-logo__broom" fill="#EA0" d="M582 675a35 35 0 0 0 8-20 3 3 0 0 1 3-2h71a3 3 0 0 1 3 3 59 59 0 0 0 0 20 3 3 0 0 1-3 3h-79A3 3 0 0 1 582 675Zm219 4a13 13 0 0 0 13-14c-1-7-7-12-14-12h-44a3 3 0 0 0-3 3v21a3 3 0 0 0 3 3ZM299 660a203 203 0 0 1-27-36 8 8 0 0 0-4-3L178 582a13 13 0 0 0-18 12v77a8 8 0 0 0 8 8h22a5 5 0 0 1 2 10L164 703a8 8 0 0 0-4 7v28a13 13 0 0 0 18 12l146-63a3 3 0 0 0 1-5A197 197 0 0 1 299 660Z"/>
                      <path class="witchie-logo__dress" fill="#333" d="M326 705h4a13 13 0 0 1 13 13v8a13 13 0 0 0 4 9l13 13a13 13 0 0 1 0 19l-56 56c-10 10-26-0-22-13L314 714A13 13 0 0 1 326 705Zm397-79c-27 0-47 26-37 54 3 7 11 16 17 19a42 42 0 0 0 19 5 38 38 0 0 0 7-1 8 8 0 0 0 6-8v-62a8 8 0 0 0-6-8 38 38 0 0 0-7-1M840 397c-3-15-33-23-77-23a521 521 0 0 0-59 4 5 5 0 0 1-5-2L567 177a8 8 0 0 0-7-4 8 8 0 0 0-8 8l1 227a5 5 0 0 1-4 5c-74 24-123 55-119 76 2 8 11 14 26 18a3 3 0 0 1 1 4l-11 11c-20 20-56 30-92 30-31 0-63-8-84-23a5 5 0 0 0-3-1 5 5 0 0 0-5 5c0 78 68 173 183 173h75a10 10 0 0 0 7-3l38-38a16 16 0 0 0 0-23l-34-34a10 10 0 0 1 0-14l15-15a3 3 0 0 1 5 2v15a5 5 0 0 0 5 5H674a4 4 0 0 0 3-7l-90-90a3 3 0 0 1 1-4c34-19 59-49 67-84a3 3 0 0 1 2-2c6-1 12-1 17-1 22 0 37 5 39 14 1 6 3 11 2 17-5 17 1 31 8 31a6 6 0 0 0 2-0C797 448 845 419 840 397Z"/>
                    </svg>
                </div>
                <div class="showcase-item__text">
                  <h3 class="showcase-item__title">Fizzy School</h3>
                  <p class="showcase-item__description">Lessons in JavaScript for jQuery newbies</p>
                </div>
              </a>
            </li>
      
        </ul> 
      
      </div>
  
    </div>
  </div>

  <script src="js/masonry-docs.min.js?2"></script>


</body>
</html>
